<template>
  <div style="height:100%;">
    <el-container style="height:100%;">
      <el-aside style="height:100%;" width="200px">
        <el-menu
          wit
          :router="true"
          default-active="1"
          class="el-menu-vertical-demo"
          style="height:100%;"
        >
          <el-menu-item index="/home/networkdisk">
            <i class="el-icon-cloudy"></i>
            <span slot="title">网盘</span>
          </el-menu-item>
          <el-menu-item index="/home/storage">
            <i class="el-icon-coin"></i>
            <span slot="title">存储</span>
          </el-menu-item>
          <el-menu-item index="/home/share">
            <i class="el-icon-share"></i>
            <span slot="title">分享</span>
          </el-menu-item>
          <el-menu-item index="/home/transfer">
            <i class="el-icon-document"></i>
            <span slot="title">日志</span>
          </el-menu-item>
          <el-menu-item index="/home/userinfo">
            <i class="el-icon-s-custom"></i>
            <span slot="title">用户信息</span>
          </el-menu-item>
          <!-- <el-menu-item index="/home/carousel">
            <i class="el-icon-s-custom"></i>
            <span slot="title">轮播图数据</span>
          </el-menu-item>-->
          <div class="menu_btn">
            <li>{{ username }}</li>

            <li class="menu_bt_img">
              <img src="../../assets/static/image/out.png" width="30" @click="outlogin" />
            </li>
          </div>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <el-row type="flex" class="row-bg" justify="space-around">
            <el-col :span="6">
              <el-button type="text" @click="dialogFormVisible = true">初始化存储空间</el-button>
            </el-col>
            <el-col :span="6">
              <!-- <div class="grid-content bg-purple-light"></div> -->
            </el-col>
            <el-col :span="6">
              <el-row>
                <el-col :span="12">
                  <div class="grid-content bg-purple" id="head_img">
                    <div class="block">
                      <el-avatar :size="48" :src="circleUrl"></el-avatar>
                    </div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <el-link
                    type="danger"
                    href="https://gitee.com/lgb24kcs/cloud/issues"
                    target="_blank"
                  >BUG提交</el-link>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-header>
        <el-main style="height:100%;">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
    <el-dialog
      title="存储空间初始化"
      :visible.sync="dialogFormVisible"
      :close-on-press-escape="false"
      :modal="true"
      :close-on-click-modal="false"
    >
      <el-steps :active="active" finish-status="success">
        <el-step title="目前测试兼容的存储"></el-step>
        <el-step title="配置存储"></el-step>
      </el-steps>
      <el-form :model="formInline" class="demo-form-inline" :rules="rules" ref="formInline">
        <div v-show="active==0">
          <el-tag type="success" class="steps-tag">阿里云</el-tag>
          <el-tag type="warning" class="steps-tag">七牛云</el-tag>
          <el-tag type="info" class="steps-tag">腾讯云</el-tag>
          <el-tag type="danger" class="steps-tag">MiNio</el-tag>

          <p>
            <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
          </p>
        </div>
        <div v-show="active == 1">
          <el-form-item label="AccessKey" prop="AccessKey">
            <el-input placeholder="请输入AccessKey" v-model="formInline.AccessKey" />
          </el-form-item>
          <el-form-item label="SecretKey" prop="SecretKey">
            <el-input placeholder="请输入SecretKey" v-model="formInline.SecretKey" />
          </el-form-item>
          <el-form-item label="BucketName" prop="BucketName">
            <el-input placeholder="请输入存储空间名称，大小写字母组成" v-model="formInline.BucketName" />
          </el-form-item>
          <el-form-item label="Alias" prop="Alias">
            <el-input placeholder="请输入存储空间别名" v-model="formInline.Alias" />
          </el-form-item>
          <el-form-item label="Zone" prop="Zone">
            <el-input placeholder="请输入内容" v-model="formInline.Zone"></el-input>
          </el-form-item>
          <el-form-item label="DomainName">
            <el-input placeholder="请输入后期自定义的域名" v-model="formInline.DomainName"></el-input>
          </el-form-item>
          <div slot="footer" class="dialog-footer">
            <el-button @click="cancle">取 消</el-button>
            <el-button type="primary" @click="addstorage('formInline')">确 定</el-button>
          </div>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { AddStorage, ListBuckets } from "@/utils/http";
export default {
  data() {
    return {
      username: "",
      circleUrl: "",
      active: 0,
      dialogFormVisible: false,
      formLabelWidth: "120px",
      formInline: {},
      Limit: 1,
      Page: 10,
      rules: {
        AccessKey: [
          {
            required: true,
            message: "请输入对应oss存储的AccessKey",
            trigger: "blur"
          }
        ],
        SecretKey: [
          {
            required: true,
            message: "请输入对应oss存储的SecretKey",
            trigger: "blur"
          }
        ],
        BucketName: [
          {
            required: true,
            message: "请输入对应oss存储的BucketName",
            trigger: "blur"
          }
        ],
        Alias: [
          {
            required: true,
            message: "请输入对应oss存储的Alias",
            trigger: "blur"
          }
        ],
        Zone: [
          {
            required: true,
            message: "请输入对应oss存储的Zone",
            trigger: "blur"
          }
        ]
        // DomainName: [
        //   {
        //     required: true,
        //     message: "请输入后期自定义的域名",
        //     trigger: "blur"
        //   }
        // ]
      }
    };
  },
  methods: {
    // 取消事件
    cancle() {
      this.dialogFormVisible = false;
      this.formInline = {};
    },
    // 步骤条
    next() {
      if (this.active++ > 2) this.active = 0;
    },

    listBockets() {
      this.loading = true;
      ListBuckets(this.Limit, this.Page)
        .then(res => {
          this.loading = false;
          if (res.data.code == 200) {
            this.$store.commit("setSorage", res.data.data);
          } else {
            this.loading = false;

            this.$message({
              message: res.data.message,
              type: "warning",
              center: true
            });
          }
        })
        .catch(err => {
          this.loading = false;

          this.$message.error(err);
        });
    },

    // 添加storage存储空间，这里提交数据失败
    addstorage(formInfo) {
      this.$refs[formInfo].validate(valid => {
        if (valid) {
          let query = {
            access_key: this.formInline.AccessKey,
            secret_key: this.formInline.SecretKey,
            bucket_name: this.formInline.BucketName,
            alias: this.formInline.Alias,
            zone: this.formInline.Zone,
            domain_name: this.formInline.DomainName
          };
          AddStorage(query)
            .then(res => {
              if (res.data.code == 200) {
                this.$message({
                  message: "添加成功",
                  type: "success",
                  center: true
                });
                this.dialogFormVisible = false;
                this.formInline = {};
                this.listBockets();
                // this.cataloguelists();
              } else {
                this.$message({
                  message: res.data.message,
                  type: "warning",
                  center: true
                });
                this.dialogFormVisible = false;
                this.formInline = {};
              }
            })
            .catch(err => {
              this.$message.error(err);
              this.dialogFormVisible = false;
              this.active = 0;
            });
        } else {
          return false;
        }
      });
    },
    // 退出事件
    outlogin() {
      localStorage.removeItem("token");
      this.$router.push("/");
    },

    // 首页用户加载
    getUserName() {
      this.listBockets();
      this.username = this.$store.state.userdata.user_name;
      this.circleUrl = this.$store.state.userdata.head_img;
    }
  },
  mounted() {
    this.getUserName();
    // this.cataloguelists();
  },
  watch: {}
};
</script>

<style lang="less" scoped>
.el-header {
  // background-color: #c2c2c2;
  border-bottom: 1px solid#c2c2c2;
  color: #333;
  text-align: center;
  line-height: 60px;
  padding: 0;
  margin: 0;
}

.avater-image {
  margin-top: 5px;
}
.steps-tag {
  margin-right: 10px;
  cursor: pointer;
}

// .el-dropdown-link {
//   cursor: pointer;
//   color: #409eff;
// }
// .el-icon-arrow-down {
//   font-size: 12px;
// }

// .dropdown {
// }
.menu_btn {
  width: 200px;
  // border: 1px solid #000;
  line-height: 70px;
  text-indent: 8px;
  font-size: 20px;
  background-color: #c2c2c2;
  height: 70px;
  position: relative;
  > li {
    display: inline-block;
  }
  .menu_bt_img {
    position: absolute;
    right: 8px;
    top: 19px;
    cursor: pointer;
  }
}
#head_img {
  margin-top: 5px;
}
</style>